<template>
	<view class="content">
		<view class="head_white">
			<view class="card_veiw">

				<view class="tx_money">
					<text class="title_money">可提现金额（元）</text>
					<text class="tv_money">{{finaceBean.withdrawal_money}}</text>
				</view>

				<view id="line"></view>


				<view class="tx_money">
					<text class="title_money">已提现金额</text>
					<text class="tv_money">{{finaceBean.un_withdrawal_money}}</text>
				</view>

			</view>

			<button class="btn_tx" @click="navTotx">提现</button>


		</view>

		<view class="item" @click="navToBankCard">
			<text class="card_name"> 银行卡</text>
			<image class="right_back" src="../../static/r_jiantou.png"></image>
		</view>

		<view class="item" @click="navTotxLog">
			<text class="card_name"> 提现申请记录</text>
			<image class="right_back" src="../../static/r_jiantou.png"></image>
		</view>

	</view>
</template>

<script>
	import ajax from "@/api/api.js";
	import url from '@/api/url.js';

	export default {
		data() {
			return {
				finaceBean:{}
			}
		},

		onLoad() {
			this.getDatas()
		},
		
		onPullDownRefresh() {
			this.getDatas()
		},

		methods: {
			getDatas() {
				ajax(url.financialManagement, {
					data: {
						// #ifdef MP-WEIXIN
						// #endif
						is_xcx: 1,

					}
				}).then(res => {
					uni.stopPullDownRefresh();
					if (res.data.code != 1) {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
						return;
					}
					this.finaceBean = res.data.data

				}).catch(err => {
					console.log(err)
					uni.stopPullDownRefresh();
				});
			},
			navToBankCard(){
				uni.navigateTo({
					url:'/pages/finance/bank-management'
				})
			},
			navTotxLog(){
				uni.navigateTo({
					url:'/pages/finance/txlog'
				})
			},
			navTotx(){
				uni.navigateTo({
					url:'/pages/finance/tx'
				})
			}


		}
	}
</script>

<style lang="scss">
	.content {
		background-color: $app-page-color;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.head_white {
			margin-bottom: 25rpx;
			display: flex;
			flex-direction: column;
			background-color: white;
			height: 380rpx;

			.card_veiw {
				align-items: center;
				justify-content: space-around;
				border-radius: 10rpx;
				flex-direction: row;
				display: flex;
				margin: 13rpx 29rpx 29rpx 29rpx;
				height: 240rpx;
				background-color: $app-staus-color;


				.tx_money {
					color: white;
					text-align: center;
					display: flex;
					flex-direction: column;

					.title_money {
						font-size: 30rpx;
					}

					.tv_money {
						margin-top: 15rpx;
						font-size: 40rpx;
					}
				}

			}

			.btn_tx {
				margin-right: 126rpx;
				align-self: flex-end;
				color: $app-staus-color;
				font-size: 30rpx;
				display: flex;
				font-size: 30rpx;
				justify-content: center;
				align-items: center;
				width: 160rpx;
				height: 60rpx;
				font-size: 18px;
				border-radius: 30rpx;
				border: 3rpx solid $app-staus-color ;
				background-color: white;
			}
		}

		.item {
			border-radius: 8rpx;
			align-items: center;
			margin: 16rpx 30rpx 0rpx 30rpx;
			background-color: white;
			height: 80rpx;
			justify-content: space-between;
			display: flex;

			.card_name {
				font-weight: 500;
				font-family: PingFang SC;
				margin-left: 33rpx;
				font-size: 30rpx;
				color: #333;
			}

			.right_back {
				margin-right: 30rpx;
				height: 35rpx;
				width: 35rpx;
			}
		}


	}
</style>